<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>景点列表</title>
    <script src="../js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/vant.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2.16/lib/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1574448_vfkj146as1r.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/scenic.css">
    <style>
    </style>
</head>

<body>
    <div id="container">
        <!-- 搜索开始 -->
        <div class="head">
            <div class="dropdown">
                <van-dropdown-menu>
                    <van-dropdown-item v-model="value1" :options="option" />
                </van-dropdown-menu>
            </div>
            <div class="search">
                <van-search v-model="value" placeholder="目的地|酒店|景点|关键字" show-action shape="round" @search="onSearch">
                    <div slot="action" @click="onSearch">搜索</div>
                </van-search>
            </div>
        </div>
        <div class="hotSpots-box">
            <h1>必游景点推荐</h1>
            <ul>
                <li>
                    <img src="https://imgs.qunarzz.com/sight/p0/1902/37/37c19abd91e4abcba3.img.jpg_222x168_fb23426a.jpg"
                        alt="">
                    <p class="title">
                        云水谣土楼群
                    </p>
                    <em>最近2403人去过</em>
                    <p>
                        <span>85</span>条路线
                    </p>
                </li>
                <li>
                    <img src="https://imgs.qunarzz.com/sight/p0/1507/cd/cd5907320e7a1a1a.img.jpg_222x168_3cf2a634.jpg"
                        alt="">
                    <p class="title">
                        中国福州云顶
                    </p>
                    <em>最近32人去过</em>
                    <p>
                        <span>6</span>条路线
                    </p>
                </li>
                <li>
                    <img src="https://imgs.qunarzz.com/sight/p0/1901/b3/b36e4290b0c93eaaa3.water.jpg_222x168_afc50156.jpg"
                        alt="">
                    <p class="title">
                        平潭岛
                    </p>
                    <em>最近106人去过</em>
                    <p>
                        <span>17</span>条路线
                    </p>
                </li>
                <li>
                    <img src="https://imgs.qunarzz.com/sight/p0/1804/76/76054ba23d8aba15a3.water.jpg_222x168_9476da9f.jpg"
                        alt="">
                    <p class="title">
                        福建天门山
                    </p>
                    <em>最近9人去过</em>
                    <p>
                        <span>9</span>条路线
                    </p>
                </li>
                <li>
                    <img src="https://imgs.qunarzz.com/sight/p0/1701/56/561eda15f0228367a3.water.jpg_222x168_d2bb944b.jpg"
                        alt="">
                    <p class="title">
                        龙凤头海滨浴场
                    </p>
                    <em>最近107人去过</em>
                    <p>
                        <span>15</span>条路线
                    </p>
                </li>
                <li>
                    <img src="https://imgs.qunarzz.com/sight/p0/1902/d8/d854abe322211672a3.img.jpg_222x168_9470e741.jpg"
                        alt="">
                    <p class="title">
                        侠天下旅游区
                    </p>
                    <em>最近26人去过</em>
                    <p>
                        <span>7</span>条路线
                    </p>

                </li>
            </ul>
        </div>
        <!-- 必游景点推荐 end-->
        <!--热门路线列表列表 start-->
        <div class="route-box">
            <h1>泉州热门路线推荐</h1>
            <ul>
                <template v-for="routes in route">
                    <li>
                        <img v-bind:src="routes.imgUrl" alt="">
                        <div class="describe">
                            <a v-bind:href="'details.html?id='+routes.id">
                                <p class="title">{{routes.title}}</p>
                            </a>
                            <p class="go">{{routes.city}}出发</p>
                            <p class="go">满意度{{routes.favRate}}%</p>
                            <p class="days">{{routes.days}}日游</p>
                            <p class="price"><span>￥<em>{{routes.tcPrice}}</em></span>人起</p>
                        </div>
                    </li>
                </template>
            </ul>
        </div>
        <!--热门路线列表列表 end-->
        <div class="tab-bar">
            <ul>
                <li>
                    <span class="iconfont icon-home" v-on:click="openindex"></span>
                    <p>首页</p>
                </li>
                <li>
                    <span class="iconfont icon-order"></span>
                    <p>订单</p>
                </li>
                <li>
                    <span class="iconfont icon-destination" v-on:click="openscenic"
                        v-bind:style="{'color':'red'}"></span>
                    <p v-bind:style="{'color':'red'}">附近</p>
                </li>
                <li>
                    <span class="iconfont icon-my" v-on:click="openPersonpage"></span>
                    <p>我的</p>
                </li>
            </ul>
        </div>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../js/SHA1.js"></script>
    <script src="../js/api.js"></script>
    <script>
        var now = Date.now();
        var appKey = SHA1("A6022627784977" + "UZ" + "1E386085-8B0F-918B-D46A-C58FB0101477" + "UZ" + now) + "." + now;
        var vm = new Vue({
            el: "#container",
            data: {
                value: "",
                value1: 0,
                color: false,
                option: [
                    { text: '泉州', value: 0 },
                    { text: '福州', value: 1 },
                    { text: '厦门', value: 2 }
                ],
                route: []
            },
            created: function () {
                this.getRoute()
            },
            methods: {
                onSearch: function () { },
                openindex: function () {
                    window.location.href = "index.html";
                },
                openscenic: function () {
                    window.location.href = "scenic.html";
                },
                openPersonpage: function () {
                    window.location.href = "personpage.html";
                },
                getRoute: function () {
                    var _this = this;
                    var params = {
                    };
                    var url = 'https://d.apicloud.com/mcm/api/scenic';
                    axios.get(url, {
                        headers: {
                            'X-APICloud-AppId': 'A6022627784977',
                            'X-APICloud-AppKey': appKey
                        }
                    })
                        .then(function (response) {
                            //alert(JSON.stringify(response));
                            vm.route = response.data;
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
        })
    </script>
</body>

</html>